import React, { useRef } from 'react'
import { useEffect } from 'react'
import * as echarts from 'echarts'

function School() {
    const ref = useRef()


    useEffect(() => {
        const chartDom = ref.current;
        var myChart = echarts.init(chartDom);
        var option;

        option = {
            color: ['#AC15FD', '#1CBE54'],
            legend: {
                data: ['昨日外来访客', '今日外来访客'],
                textStyle: {
                    color: '#777F9F',
                },
                icon: "circle",
            },
            tooltip: {
                trigger: 'axis'
            },
            xAxis: [
                {
                    type: 'category',
                    data: ['1月', '2月', '3月', '4月', '5月', '6月'],
                    axisTick: {
                        show: false //不显示坐标轴刻度线
                    },
                    axisLabel: {        //x轴文字的配置
                        show: true,
                        color: "#fff",
                    }
                },
            ],
            yAxis: {},
            series: [
                {
                    name: '昨日外来访客',
                    type: 'bar',
                    data: [78, 50, 30, 40, 78, 50],
                    barMaxWidth: 10,
                    itemStyle: {
                        borderRadius: [8, 8, 0, 0]
                    }
                },
                {
                    name: '今日外来访客',
                    type: 'bar',
                    data: [40, 10, 20, 25, 40, 35],
                    barMaxWidth: 10,
                    itemStyle: {
                        borderRadius: [8, 8, 0, 0]
                    }
                },
            ]
        };

        option && myChart.setOption(option);
    }, [])
    return (
        <>
            <div className="school-2" ref={ref}>

            </div>
        </>
    )
}

export default School
